<template>
  <div>
    <div v-if="visible" style="width:1200px;margin:0 auto;">
      <el-row :gutter="10">
        <el-col :span="6" v-for="arr in recipeArr" :key="arr.id" >
          <el-card>
            <a href="javascript:void(0)" @click="detail(arr.id)" >
              <img :src="BASE_URL+arr.imgUrl" width="100%" height="145px">
              <p style="height:40px;">{{arr.title}}</p>
            </a>
            <el-row >
              <el-col :span="4">
                <el-avatar size="small" :src="BASE_URL+arr.userImgUrl" />
              </el-col>
              <el-col :span="10">
                {{arr.nickname}}
              </el-col>
              <el-col :span="10">
                <span style="float: right;">{{arr.categoryName}}</span>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>

    </div>
    <div v-else style="width:1200px;height:600px;margin:0 auto;">
      <el-row :gutter="10">
        <el-col :span="6" v-for="arr in recipeArr" :key="arr.id" >
          <el-card>
            <img :src="BASE_URL+arr.imgUrl" width="100%" height="145px">
            <p style="height:40px;">{{arr.title}}</p>
            <el-row >
              <el-col :span="4">
                <el-avatar size="small" :src="BASE_URL+arr.userImgUrl" />
              </el-col>
              <el-col :span="10">
                {{arr.nickname}}
              </el-col>
              <el-col :span="10">
                <span style="float: right;">{{arr.categoryName}}</span>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>

    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      recipeArr: [],//食谱  视频 资讯
      visible:'true'

    }
  },
  methods: {
    name() {

    },
    loadListContents(){
      if (location.search.includes('type')){
        //获取type类型 new Scanner(System.in).nextInt()
        let type = new URLSearchParams(location.search).get('type')
        let url = this.BASE_URL + '/v1/contents/'+type +'/list'
        this.axios.get(url).then(
            res=>{
              if(res.data.code == 1){

                this.recipeArr = res.data.data

              }else{
                this.$message.error(res.data.msg)
              }
            }
        )
      }else{
        //获取type类型 new Scanner(System.in).nextInt()
        let title = new URLSearchParams(location.search).get('title')
        let url = this.BASE_URL + '/v1/contents/like?title='+title
        this.axios.get(url).then(
            res=>{
              if(res.data.code == 1){

                this.recipeArr = res.data.data

              }else{
                this.$message.error(res.data.msg)
              }
            }
        )
      }
    }
  },
  mounted() {

      //  保证即使没有数据footer底部功能还在底部显示
      this.visible = this.recipeArr.length>= 10?true:false

      this.loadListContents()
  },
  beforeRouteUpdate(to, from, next) {
    //此方法在路由跳转之前执行,如果不执行里面的next则拦截此次跳转
    next();//放行
    this.loadListContents();
  }
}
</script>

<style scoped>

</style>
